<!-- 日产能分析 -->
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="拌合站" prop="identifier" class="query">
        <el-select v-model="queryParams.identifier" clearable placeholder="请选择">
          <el-option v-for="item in stationList" :key="item.name" :label="item.name" :value="item.identifier"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="时间范围" prop="time">
        <deatetime ref="deatetime" v-model="queryParams.time"> </deatetime>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" v-hasPermi="['zhgd:allCapacity:query']">搜索</el-button>
        <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
      </el-form-item>
    </el-form>

    <el-table border v-loading="loading" :data="productListDayList" max-height="264">
      <!-- <el-table border v-loading="loading" :data="productListDayList" max-height="228"> -->
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" width="60" type="index" />
      <el-table-column label="生产日期" prop="dateDays" align="center" min-width="120" show-overflow-tooltip />
      <el-table-column label="拌合机名称" prop="name" align="center" min-width="120" show-overflow-tooltip />
      <!-- <el-table-column label="生产总重量" prop="totMete" align="center" min-width="120" show-overflow-tooltip /> -->
      <el-table-column label="生产总重量" prop="totMete" align="center" min-width="120" show-overflow-tooltip>
        <template slot-scope="scope">{{ (scope.row.totMete).toFixed(2) }}</template>
      </el-table-column>
      <el-table-column label="生产盘数" prop="pieCnt" align="center" min-width="120" show-overflow-tooltip />
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- Echarts -->
    <div id="Chart2"></div>
  </div>
</template>
    
<script>
import { deptListData } from "@/api/zhgd/hntManage";
import { productListDay, productListDayStatistics } from "@/api/zhgd/allCapacity";
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import deatetime from "@/components/Datetime"; // 生产日期


export default {
  name: "HntManage",
  data() {
    return {
      Chart2: null,
      timeArr: [],
      totMeteArr: [],
      // Echarts图查询参数
      identifier: "",
      startTime: "",
      endTime: "",
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 拌合站搜索框数据
      stationList: [],
      // 日产能列表
      productListDayList: [],
      // Echarts列表
      echartsList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        time: []
      },
      deptId: null
    };
  },
  components: {
    deatetime,
  },
  created() {
    this.getList();
    this.getChartData();
    this.getProjectList();
  },
  watch: {
    deptId: {
      handler(val, oldVal) {
        if (val) {
          this.queryParams.id = val;
          this.getProjectList();
        } else {
          // console.log("先选择标段")
        }
      },
      deep: true,
      immediate: true,
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    /** 查询拌合站搜索框数据 */
    getProjectList() {
      deptListData(this.queryParams).then((response) => {
        this.stationList = response;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.identifier = this.queryParams.identifier;
      this.startTime = this.queryParams?.time?.length ? this.queryParams?.time[0] : null;
      this.endTime = this.queryParams?.time?.length ? this.queryParams?.time[1] : null;
      this.timeArr = [];
      this.totMeteArr = [];
      this.queryParams = this.getSearchParams();
      this.getList();
      this.getChartData();
    },
    getSearchParams() {
      const params = {};
      for (const key in this.queryParams) {
        if (key === "time") {
          const time = this.queryParams[key];
          if (time && time.length === 2) {
            params.startTime = time[0];
            params.endTime = time[1];
          }
        } else {
          params[key] = this.queryParams[key];
        }
      }
      return params;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.id = "";
      this.$refs.deatetime.startTime = null;
      this.$refs.deatetime.endTime = null;
      this.queryParams.time = [];
      this.queryParams.startTime = "";
      this.queryParams.endTime = "";
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getList() {
      /** 日产能列表 */
      productListDay(this.queryParams).then(response => {
        this.productListDayList = response.data.records;
        this.total = response.data.total;
      });
    },
    // 日产能分析
    getChartData() {
      productListDayStatistics({ identifier: this.identifier, startTime: this.startTime, endTime: this.endTime }).then(response => {
        response.forEach((item => {
          this.timeArr.push(item.dateDays)
          this.totMeteArr.push(item.totMete)
        }))
        if (document.getElementById("Chart2")) {
          this.createDayChart(response);
        } else {
          this.$nextTick(() => {
            this.createDayChart(response);
          });
        }
      });
    },
    // 盘数图表
    createDayChart() {
      if (null == this.Chart2) {
        this.Chart2 = echarts.init(document.getElementById("Chart2"));
      } else {
        this.Chart2.clear();
      }
      let option = this.getLineOption();
      this.Chart2.setOption(option);
    },
    /*** 获取图表配置信息 */
    getLineOption() {
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 50,
          left: '',
          right: '',
          bottom: '',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: this.timeArr,
        }],
        yAxis: [{
          name: '总产量(kg)',
          type: 'value',
        }],
        series: [{
          type: 'bar',
          barWidth: '45%',
          data: this.totMeteArr,
        }]

      };
      return option;
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption()
    },
  }
};
</script>
  
<style lang="scss" scoped>
::v-deep .query {
  .el-form-item__label {
    width: 100px !important;
  }
}

.app-container {
  margin-top: -50px;
}

#Chart2 {
  width: 1380px;
  height: 360px;
  transform-origin: 0 0;
}
</style>
    
    
     
    